<template>
    <div class="white-box">
        <title-more title="小程序付款设置" />
        <el-tabs v-model="tabName" @tab-click="clickTab">
            <el-tab-pane label="客户端付款配置" name="0">
                <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheck" label-width="240px">
                    <el-form-item label="付款到银行卡" prop="bank_pay" required>
                        <el-switch
                            v-model="ruleForm.bank_pay"
                            width="72px"
                            size="large"
                            :inactive-value="0"
                            :active-value="1"
                            inline-prompt
                            active-text="已开启"
                            inactive-text="已关闭"
                        />
                        <div class="input-tips">开启后，客户端在<code>选择提现方式</code>时增加<code>提现到银行（仅支持线下转款）</code>方式</div>
                    </el-form-item>
                    <el-form-item label="付款到微信" prop="wx_pay" required>
                        <el-switch
                            v-model="ruleForm.wx_pay"
                            width="72px"
                            size="large"
                            :inactive-value="0"
                            :active-value="1"
                            inline-prompt
                            active-text="已开启"
                            inactive-text="已关闭"
                        />
                        <div class="input-tips">开启后，客户端在<code>选择提现方式</code>时增加<code>提现到微信</code>方式</div>
                    </el-form-item>
                    <el-form-item label="微信单笔转账最高额度" prop="transfer_amount">
                        <el-input
                            v-model.trim="ruleForm.transfer_amount"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            clearable
                            placeholder="请输入微信单笔转账最高额度"
                        />
                        <span class="form-item__char">元</span>
                        <div class="input-tips">微信单笔转账额度范围<code>200~20000</code>之间</div>
                    </el-form-item>
                    <el-form-item label="微信转账场景ID" prop="transfer_scene_id">
                        <el-input
                            v-model.trim="ruleForm.transfer_scene_id"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            clearable
                            placeholder="请输入微信转账场景ID（选填）"
                        />
                    </el-form-item>
                    <el-form-item>
                        <div class="flexs-center" style="margin-top: 40px">
                            <el-button type="primary" :loading="form_loading" @click="submitForm(ruleRef)"> 确认保存 </el-button>
                            <el-button @click="resetForm(ruleRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="供应商端付款配置" name="1">
                <el-form ref="ruleSuppRef" :model="ruleForm" :rules="ruleSuppCheck" label-width="240px">
                    <el-form-item label="付款到银行卡" prop="bank_pay" required>
                        <el-switch
                            v-model="ruleSuppForm.bank_pay"
                            width="72px"
                            size="large"
                            :inactive-value="0"
                            :active-value="1"
                            inline-prompt
                            active-text="已开启"
                            inactive-text="已关闭"
                        />
                        <div class="input-tips">开启后，供应商端在<code>选择提现方式</code>时增加<code>提现到银行（仅支持线下转款）</code>方式</div>
                    </el-form-item>
                    <el-form-item label="付款到微信" prop="wx_pay" required>
                        <el-switch
                            v-model="ruleSuppForm.wx_pay"
                            width="72px"
                            size="large"
                            :inactive-value="0"
                            :active-value="1"
                            inline-prompt
                            active-text="已开启"
                            inactive-text="已关闭"
                        />
                        <div class="input-tips">开启后，供应商端在<code>选择提现方式</code>时增加<code>提现到微信</code>方式</div>
                    </el-form-item>
                    <el-form-item label="微信单笔转账最高额度" prop="transfer_amount">
                        <el-input
                            v-model.trim="ruleSuppForm.transfer_amount"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            clearable
                            placeholder="请输入微信单笔转账最高额度"
                        />
                        <span class="form-item__char">元</span>
                        <div class="input-tips">微信单笔转账额度范围<code>200~20000</code>之间</div>
                    </el-form-item>
                    <el-form-item label="微信转账场景ID" prop="transfer_scene_id">
                        <el-input
                            v-model.trim="ruleSuppForm.transfer_scene_id"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            clearable
                            placeholder="请输入微信转账场景ID（选填）"
                        />
                    </el-form-item>
                    <el-form-item>
                        <div class="flexs-center" style="margin-top: 40px">
                            <el-button type="primary" :loading="form_loading" @click="submitSuppForm(ruleSuppRef)"> 确认保存 </el-button>
                            <el-button @click="resetSuppForm(ruleSuppRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import { getCurrentInstance, ref, onMounted, reactive } from "vue"
import TitleMore from "@components/title-more.vue"
const { proxy } = getCurrentInstance()

onMounted(() => {
    getInfo()
})

function getInfo() {
    let urls = tabName.value == 0 ? "config/transferUser" : "config/transferSupplier"
    proxy.$axios
        .get(urls)
        .then((res) => {
            tabArrs.value[tabName.value].loading = false
            if (res.data.code == 0) {
                let result = res.data.data
                if (tabName.value == 0) {
                    ruleForm.transfer_scene_id = result.transfer_scene_id
                    ruleForm.transfer_amount = result.transfer_amount
                    ruleForm.wx_pay = Number(result.transfer_weixin || 0)
                    ruleForm.bank_pay = Number(result.transfer_bank || 0)
                } else {
                    ruleSuppForm.transfer_scene_id = result.transfer_scene_id
                    ruleSuppForm.transfer_amount = result.transfer_amount
                    ruleSuppForm.wx_pay = Number(result.transfer_weixin || 0)
                    ruleSuppForm.bank_pay = Number(result.transfer_bank || 0)
                }
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            tabArrs.value[tabName.value].loading = false
        })
}

const tabName = ref("0")
const tabArrs = ref([
    {
        loading: true,
    },
    {
        loading: true,
    },
])
const clickTab = (pane) => {
    tabName.value = pane.index
    form_loading.value = false
    tabArrs.value[tabName.value].loading && getInfo()
}

/**
 * 客户端-保存
 * @param {Boolean} form_loading 弹窗按钮状态
 * @property {Array} ruleRef 表单规则
 * @property {Object} ruleForm  表单字段
 * @property {Object} ruleCheck  表单提示
 */
const form_loading = ref(false)
const ruleRef = ref(null)
const ruleForm = reactive({
    transfer_scene_id: "", // 转账场景ID
    transfer_amount: 200, // 微信单笔转账最高额度
    wx_pay: 1,
    bank_pay: 1,
})
const ruleCheck = reactive({
    transfer_amount: [{ required: true, validator: priceLimit, trigger: "blur" }],
})
// 判断额度范围200~20000
function priceLimit(rule, value, callback) {
    if (value == "") {
        callback(new Error("请输入微信单笔转账最高额度(200~20000)"))
    } else if (ruleForm.transfer_amount < 200 || ruleForm.transfer_amount > 20000) {
        callback(new Error("微信单笔转账额度范围为200~20000元！"))
    } else {
        callback()
    }
}
// 确认
const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                transfer_weixin: ruleForm.wx_pay, // 转账到微信[0:不支持,1:支持]
                transfer_bank: ruleForm.bank_pay, // 转账到银行卡[0:不支持,1:支持]
                transfer_scene_id: ruleForm.transfer_scene_id,
                transfer_amount: ruleForm.transfer_amount,
            }
            proxy.$axios
                .post("config/transferUser", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "保存成功", type: "success" })
                        getInfo()
                    } else {
                        proxy.$message({ message: res.data.msg, type: "error" })
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

/**
 * 供应商端-保存
 * @property {Array} ruleSuppRef 表单规则
 * @property {Object} ruleSuppForm  表单字段
 * @property {Object} ruleSuppCheck  表单提示
 */
const ruleSuppRef = ref(null)
const ruleSuppForm = reactive({
    transfer_scene_id: "", // 转账场景ID
    transfer_amount: 200, // 微信单笔转账最高额度
    wx_pay: 1,
    bank_pay: 1,
})
const ruleSuppCheck = reactive({
    transfer_amount: [{ required: true, validator: priceLimit, trigger: "blur" }],
})
// 确认
const submitSuppForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                transfer_weixin: ruleSuppForm.wx_pay, // 转账到微信[0:不支持,1:支持]
                transfer_bank: ruleSuppForm.bank_pay, // 转账到银行卡[0:不支持,1:支持]
                transfer_scene_id: ruleSuppForm.transfer_scene_id,
                transfer_amount: ruleSuppForm.transfer_amount,
            }
            proxy.$axios
                .post("config/transferSupplier", data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        proxy.$message({ message: "保存成功", type: "success" })
                        getInfo()
                    } else {
                        proxy.$message({ message: res.data.msg, type: "error" })
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetSuppForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<script>
export default {
    name: "PaymentConfig",
}
</script>
<style lang="less" scoped>
.el-form {
    margin-top: 30px;
}
.form-item__char {
    color: @gray-7;
    font-size: @font-size-md;
    margin-left: @margin-sm;
}
</style>
